@import "public";

@media screen and (max-width: 800px){
  html{font-size: 50px}
  .wal{max-width: 8rem;}

  $headH:1rem;
  body.navShow{
    .navBg{display: block;}
    .head .nav{right: 0;}
  }
  .navBg{
    position: fixed; z-index: 49; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: none;
  }
  .head{
    .wal{height: $headH}
    .navA{display: block; @include absolute($r:-.3rem, $t:0); width: $headH; height: $headH; background: url("../image/navA.png") center no-repeat; background-size: .4rem}
    a.tel{right: .8rem; font-size: .22rem; line-height: $headH}
  }
  .nav{position: fixed; height: 100%; overflow-y: auto; width: 4rem; background: #000; right: -4rem;
    .close{display: block; height: $headH;
      i{display: block; position: absolute; top: 0; right: 0; background: url("../image/close.png") center no-repeat; background-size: .4rem; width: $headH; height: $headH;}
    }
    li{float: none; border-top: rgba(255,255,255,0.2) solid 1px}
    a.name{font-size: .26rem; line-height: $headH; height: $headH; text-align: center; color: #fff}
    .list{position: relative; left: 0; top: 0; width: 100%; margin-left: 0; opacity: 1; visibility: visible; border-top: rgba(255,255,255,0.2) solid 1px; padding: .1rem; display: none;
      a{height: .8rem; line-height: .8rem; font-size: .24rem}
    }
  }

  .foot{
    .msg{font-size: .22rem; line-height: .7rem}
  }

  .pageNum{
    a{width: .6rem; height: .6rem; font-size: .22rem}
    a.arrow img{width: .1rem}
    a.arrow2{width: 1.6rem;
      img{width: .16rem}
    }
    div{display: none}
  }

  .pageNum2{font-size: .22rem; padding-right: 2.5rem;
    dl.share{top: .35rem}
    a.back{width: 1.5rem; height: .46rem; line-height: .44rem; top: 1rem}
  }

  .indexBanner{
    .img{width: 7rem; margin-left: -3.5rem}
  }

  .pagebg1{background-size: 300%}

  .indexPart1{padding: 1.2rem 0 1rem 2.1rem;
    .img{left: -.6rem}
    .content{font-size: .22rem; line-height: .4rem}
  }

  .indexPart2{
    ul{margin-left: -.3rem}
    li{width: 50%; padding: .2rem 0 .3rem .3rem}
    .container{
      .name{font-size: .24rem; line-height: 1.6em}
      p{font-size: .22rem}
      .time{line-height: .6rem; font-size: .2rem}
    }
  }

  .indexPart3{
    li{width: 33.333%;
      a.name{font-size: .22rem}
    }
  }

  .indexPart4{
    .list{
      .arrow{position: relative; top: 0; right: 0; justify-content: center; -webkit-justify-content: center;
        a{margin: 0 .1rem}
      }
    }
    .swiper-slide{
      .bigImg{width: 100%}
      .imgList{width: 100%; padding-top: .3rem}
    }
  }

  .indexPart5{
    .wal{padding: .55rem 0;
      .msg{font-size: .24rem}
      .btn{padding-bottom: .2rem;
        a{font-size: .24rem; width: 1.8rem; height: .6rem; line-height: .6rem}
      }
      .ewm{
        p{font-size: .2rem}
      }
    }
  }

  .pageNav{
    a{height: .8rem; line-height: .8rem; font-size: .24rem}
  }

  .pageNow{font-size: .22rem}

  .newShow{font-size: .24rem;
    h2.title{font-size: .34rem}
    .time{padding: .2rem 0 .4rem 0; font-size: .2rem}
  }

  .rule{
    .col-2{width: 100%}
    .title{height: .8rem; font-size: .26rem}
    .bg{font-size: .22rem}
    .list{
      li{line-height: .6rem}
    }
    .part1{
      dl{padding-top: .3rem}
      dd{width: 1.8rem; height: 1.2rem;
        div{font-size: .26rem}
      }
    }
    .content{line-height: .5rem}
    .part2{min-height: 2.4rem; flex-wrap: wrap; -webkit-flex-wrap: wrap;
      .content{width: 100%}
      dl{width: 100%; flex-wrap: wrap; -webkit-flex-wrap: wrap}
      dd{width: 46%; height: 2.5rem; margin-top: .3rem;
        div{font-size: .26rem}
        p{line-height: .4rem}
      }
    }
  }

  .about_01{
    .content{font-size: .22rem; line-height: .4rem}
    h2.title{font-size: .26rem; line-height: .4rem}
    .list{
      .wal{margin: 0}
      a.arrow{
        &.prev{left: 0}
        &.next{right: 0}
      }
      .swiper-slide{
        .year{font-size: .32rem}
        .msg{width: 110%; left: -5%; font-size: .18rem; line-height: .32rem}
      }
    }
  }

  .about_02.wal{margin: 0}
  .about_02{
    .pageTitle{padding-bottom: 0}
    .list{position: relative; height: 9rem; width: 100%; overflow: hidden; padding-top: 1.2rem}
    ul{position: relative}
    li{position: absolute;
      .img{
        h2{font-size: .22rem}
      }
      dd{font-size: .2rem}
    }
    .li_01{left: .7rem; top: 0}
    .li_02{left: 50%; top: 4rem; margin-left: -1.2rem}
    .li_03{right: .7rem; top: 0}
  }

  .about_03{
    .list{
      &:before{left: -.3rem}
      &:after{right: -.3rem}
      ul{width: 6rem; margin: 0 auto; padding-bottom: .9rem}
      li{width: 100%; padding-bottom: .3rem;
        .container{height: 3.5rem; font-size: .24rem}
      }
      .li_01 .container{line-height: .5rem;
        dd{
          a{width: 1.8rem; height: .7rem; line-height: .7rem}
        }
      }
      .li_02 .container{line-height: .6rem;
        span{font-size: .44rem}
      }
      .li_03 .container{
        .img{width: 4rem; padding-top: .56rem}
        p{padding: .2rem 0 .4rem 0}
        a{width: 1.6rem; height: .6rem; line-height: .6rem}
      }
    }
  }

  .about_04{
    li{flex-wrap: wrap; -webkit-flex-wrap: wrap;
      .img{width: 4rem; padding-bottom: .3rem}
      .container{width: 100%; line-height: .4rem;
        h2{font-size: .26rem}
        p{font-size: .22rem}
      }
    }
    li:nth-child(even){flex-direction: row; -webkit-flex-direction: row}
  }

}
@media screen and (max-width: 550px){
  .wal{margin: 0 .3rem;}
}